<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    pieData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        backgroundColor: '#fff',
        title: {
          text: '订单统计',
          textStyle: {
            fontSize: 19
          }
        },
        color: ['#41a0f9', '#3f82ff', '#70ecf8'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : <br/>{c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          data: [
            { name: '课程订单', icon: 'stack' },
            { name: '班级订单', icon: 'pie' },
            { name: '会员订单', icon: 'pie' }
          ],
          bottom: 0,
          itemHeight: 20,
          itemWidth: 20,
          textStyle: {
            fontSize: 15
          }
        },
        graphic: [
          { // 设置饼状图内部文字
            type: 'text',
            left: 'center', // 设置偏移量
            top: '39%',
            z: 2,
            zlevel: 100,
            style: {
              text: '订单统计',
              x: 100,
              y: 100,
              textAlign: 'center',
              fill: '#808489',
              width: 200,
              height: 200,
              textFont: 'normal 20px verdana'
            }
          }
        ],
        series: [
          {
            name: '订单',
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              show: true
            },
            radius: ['55%', '80%'],
            smooth: true,
            barWidth: 40,
            data: [
              { value: this.pieData.classroomOrders, name: '班级订单' },
              { value: this.pieData.courseOrders, name: '课程订单' },
              { value: this.pieData.memberOrders, name: '会员订单' }
            ]
          }
        ]
      })
    }
  }
}
</script>
